import React, { Component } from 'react';
import {
    Dimensions, Image, StyleSheet, 
    Text, TouchableOpacity, View, Platform 
} from 'react-native';

const { width } = Dimensions.get('window');

import { Global } from '../util/constants';
import { isEmpty } from "../util/util";
import { scaleSize } from '../util/size';
import icons from '../util/icons';

interface Iprops {
    handleRightClick?: Function,
    handleRightBtnClick?: Function,
    nav: any,
    title?: string | JSX.Element,
    rightIcon?: any,
    rightBtnText?: string,
    backgroundColor?: string,
    back?: boolean,
    textOnPress?: Function,
    onlyBar?: boolean, // ios 顶部状态栏
}


export default class CommonTitleBar extends Component<Iprops, any> {
    constructor(props: Iprops) {
        super(props);
    }


    handleRightClick = () => {
        if (this.props.handleRightClick) {
            this.props.handleRightClick();
        }
    }

    handleBackClick = () => {
        this.props.nav.goBack();
    }

    renderBar = () => {
        let backSource = icons.back;
        const { back = true, title, rightIcon, backgroundColor, onlyBar } = this.props;
        let titltColor = 'white';
        if (backgroundColor === 'white') {
            titltColor = '#4A4A4A';
        }
        let isIOS = Platform.OS === 'ios';
        if (onlyBar) {
            return <View style={{ height: 20, backgroundColor: backgroundColor || Global.titleBackgroundColor }} />
        }
        return (
            <View style={styles.container}>
                {
                    isIOS ? (
                        <View style={{ height: 20, backgroundColor: backgroundColor || Global.titleBackgroundColor }} />
                    ) : null
                }

                <View style={{
                    width: width,
                    height: scaleSize(Global.titleBarHeight),
                    flexDirection: 'row',
                    alignItems: 'center',
                    backgroundColor: backgroundColor || Global.titleBackgroundColor
                }}>
                    {
                        back ? (
                            <TouchableOpacity activeOpacity={0.5} onPress={this.handleBackClick}>
                                <Image source={backSource} style={styles.backBtn} />
                            </TouchableOpacity>
                        ) : null
                    }
                    <View style={styles.titleContainer}>
                        {
                            typeof title === 'string' ? (
                                <Text style={[styles.title, { color: titltColor }]} onPress={() => {
                                    if (this.props.textOnPress) {
                                        this.props.textOnPress()
                                    }
                                }}>{title}</Text>
                            ) : (
                                    <TouchableOpacity style={[styles.title]} activeOpacity={1} onPress={() => {
                                        if (this.props.textOnPress) {
                                            this.props.textOnPress()
                                        }
                                    }}>{title}</TouchableOpacity>
                                )
                        }
                        {
                            isEmpty(rightIcon) ? (null) : (
                                <TouchableOpacity activeOpacity={0.6} onPress={() => this.handleRightClick()}>
                                    <Image style={styles.img} source={rightIcon} />
                                </TouchableOpacity>
                            )
                        }
                    </View>
                </View>
            </View>
        );
    }

    render() {
        return this.renderBar();
    }
}

const styles = StyleSheet.create({
    container: {
        flexDirection: 'column',
    },
    content: {
        width: width,
        height: scaleSize(Global.titleBarHeight),
        backgroundColor: Global.titleBackgroundColor,
        flexDirection: 'row',
        alignItems: 'center'
    },
    backBtn: {
        marginLeft: scaleSize(20),
        // paddingLeft: scaleSize(20),
        marginRight: 8,
        width: scaleSize(9),
        height: scaleSize(14),
    },
    titleContainer: {
        flex: 1,
        flexDirection: 'row',
        alignItems: 'center',
        paddingLeft: 10,
        paddingRight: 10,
    },
    title: {
        marginLeft: scaleSize(10),
    },
    img: {
        width: 30,
        height: 30,
        marginRight: 5
    }
});
